<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>666后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>

<body>
    <div class="content-wrapper">
        <div class="content-header ">
            <div class="content-header-left mb-2 clearfix">
                <h3 class="content-header-title mb-0">结算记录</h3>
            </div>
        </div>
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <div class="tablebox1">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>订单ID</th>
                                    <th>结算金额</th>
                                    <th>处理状态</th>
                                    <th>代理商名称</th>
                                    <th>发货时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="showMessage">
                            </tbody>
                        </table>
                        <div class="page clearfix">
                            <div class="pull-left">共 <span id="totalCount"></span>条记录 第 <span id="pageNum"></span> /
                                <span id="pages"></span> 页</div>
                            <div class="pull-right">
                                <nav aria-label="..." class="pull-left">
                                    <ul class="pagination" id="pagination">
                                        <li class="disabled"><a href="#" aria-label="Previous"><span
                                                    aria-hidden="true">«</span></a></li>
                                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                                    </ul>
                                </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
    <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
    <script src="app-assets/js/app.js" type="text/javascript"></script>
    <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
    <script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>
</body>

</html>
<script>
    $(function () {
        onloadOk(1);
    })
    var pageNum = 1;
    function onloadOk(pageNum) {
        $.ajax({
            url: 'http://localhost:24080/purchaseSettlement/selectPurchaseSettlementSuppliers',
            type: 'get',
            dataType: 'json',
            data: {
                pageNum: pageNum,
            },
            success: function (data) {
                pageNum = data.data.pageNum;
                $('#totalCount').html(data.data.total);
                $('#pageNum').html(data.data.pageNum);
                $('#pages').html(data.data.pages);
                $('#showMessage').empty();
                console.log(data);
                var showMessage = data.data.list;
                var status = "";
                var showButtonMessage = ""
                showMessage.forEach(function (item) {
                    if (item.settlementStatus == 0) {
                        status = "未结算";
                        showButtonMessage = "结算"
                        var buttonDisabled = ""; // 不禁用按钮
                    } else if (item.settlementStatus == 1) {
                        status = "已结算";
                        showButtonMessage = "已结算不可操作"
                        var buttonDisabled = "disabled"; // 禁用按钮
                    }
                    var str = `
                    <tr>
                        <td>${item.poId}</td>
                        <td>${item.totalAmount}</td>
                        <td>${status}</td>
                        <td>${item.supplierName}</td>
                        <td>${item.shipment}</td>
                        <td><button class="btn btn-danger" onclick="updateStatusButton('${item.poId}', '${item.supplierId}')" ${buttonDisabled}>${showButtonMessage}</button></td>
                    </tr>
                `;
                    $('#showMessage').append(str);
                });
                // 更新分页按钮
                updatePagination(data.data.pageNum, data.data.pages);
            }
        });
    }

    function updatePagination(currentPage, totalPages) {
        $('#pagination').empty();

        // 添加上一页按钮
        if (currentPage > 1) {
            $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage - 1) + ')"><span aria-hidden="true">«</span></a></li>');
        } else {
            $('#pagination').append('<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>');
        }

        // 添加页码按钮
        for (let i = 1; i <= totalPages; i++) {
            if (i === currentPage) {
                $('#pagination').append('<li class="active"><a href="#">' + i + ' <span class="sr-only">(current)</span></a></li>');
            } else {
                $('#pagination').append('<li><a href="#" onclick="changePage(' + i + ')">' + i + '</a></li>');
            }
        }

        // 添加下一页按钮
        if (currentPage < totalPages) {
            $('#pagination').append('<li><a href="#" onclick="changePage(' + (currentPage + 1) + ')"><span aria-hidden="true">»</span></a></li>');
        } else {
            $('#pagination').append('<li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>');
        }
    }

    function changePage(pageNum) {
        onloadOk(pageNum);
    }

    // 结算按钮
    function updateStatusButton(poId, supplierId) {
        if (confirm("确定要结算吗？")) {
            // 确认按钮被点击，执行相应的操作
        } else {
            // 取消按钮被点击，取消操作
            return;
        }
        alert(poId + "   " + supplierId);
        $.ajax({
            url: 'http://localhost:24080/purchaseSettlement/updatePurchaseSettlementStatus',
            type: 'post',
            data: { poId: poId, supplierId: supplierId },
            dataType: 'json',
            success: function (data) {
                console.log(data);
                onloadOk(pageNum);
            }
        });
    }
</script>